<template>
  <div class="login-page">
    <!-- 主内容区域 -->
    <div class="main-content" :class="{ 'slide-left': loginDrawer }">
      <div class="content-wrapper">
        <div class="floating-image">
          <img :src="shatterImage" alt="碎片效果图" />
        </div>
        
        <div class="text-content">
          <h1 class="title">可视化全链路日志追踪系统</h1>
          <p class="description">
            实现业务日志的高效组织和动态串联，离散的日志数据将会根据业务逻辑进行组织，绘制出执行现场，从而可以实现高效的业务追踪。
          </p>
          <div class="button-group">
            <el-button 
              type="primary" 
              class="login-button"
              size="large"
              @click="showLoginDrawer"
            >
              进入系统
            </el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 登录表单区域 -->
    <div class="login-section" :class="{ 'show': loginDrawer }">
      <div class="login-header">
        <h2>欢迎回来 👋</h2>
        <el-button 
          type="text" 
          class="close-button"
          @click="loginDrawer = false"
        >
          <i class="el-icon-close"></i>
        </el-button>
      </div>
      
      <div class="login-form">
        <el-form ref="formRef" :model="loginForm" class="form-content">
          <el-form-item>
            <el-input
              v-model="loginForm.username"
              placeholder="请输入用户名"
              class="form-input"
            />
          </el-form-item>

          <el-form-item>
            <el-input
              v-model="loginForm.password"
              type="password"
              placeholder="请输入密码"
              class="form-input"
              show-password
            />
          </el-form-item>

          <!-- <div class="form-options">
            <el-checkbox v-model="loginForm.remember">记住账号</el-checkbox>
          </div> -->

          <el-button 
            type="primary" 
            class="submit-button"
            @click="handleLogin"
          >
            登 录
          </el-button>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElButton, ElDrawer, ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElCheckbox, ElLink } from 'element-plus'
import { useRouter } from 'vue-router'
import shatterImage from '../assets/shatter.png'

const router = useRouter()
const loginDrawer = ref(false)
const loginForm = ref({
  userType: '',
  username: '',
  password: '',
  remember: false
})

const showLoginDrawer = () => {
  loginDrawer.value = true
}

const handleLogin = () => {
  // 处理登录逻辑
  console.log('登录信息：', loginForm.value)
  router.push({ name: 'dashboard' })
}

const goToDashboard = () => {
  router.push({ name: 'dashboard' })
}
</script>

<style scoped>
.login-page {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  /* background-color: #55b1ff; */
  background-color: #ffd955;
}

/* 主内容区域样式 */
.main-content {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease-in-out;
}

.main-content.slide-left {
  transform: translateX(-25%);
}

.content-wrapper {
  width: 50%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  transform-origin: center;
}

.floating-image {
  margin-bottom: 20px;
  animation: float 3s ease-in-out infinite;
}

.floating-image img {
  width: 180px;
  height: auto;
}

.text-content {
  text-align: center;
  max-width: 80%;
}

.title {
  font-size: 32px;
  /* color: #303133; */
  color: #FFF;
  margin-bottom: 20px;
  font-weight: 600;
}

.description {
  font-size: 16px;
  /* color: #606266; */
  color: #FFF;
  line-height: 1.8;
  margin-bottom: 30px;
}

.button-group {
  display: flex;
  gap: 20px;
  justify-content: center;
}

.login-button {
  padding: 12px 40px;
  font-size: 16px;
}

/* 登录表单样式 */
.login-form {
  padding: 20px;
  max-width: 400px;
  margin: 0 auto;
  width: 100%;
}

.login-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  /* border-bottom: 1px solid #f0f0f0; */
}

.login-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #FFF;
}

.close-button {
  padding: 0;
  font-size: 20px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .content-wrapper {
    width: 100%;
    padding: 20px;
  }

  .title {
    font-size: 24px;
  }

  .description {
    font-size: 14px;
  }

  .floating-image img {
    width: 150px;
  }

  .text-content {
    max-width: 90%;
  }
}

/* 登录区域样式 */
.login-section {
  position: absolute;
  top: 0;
  left: 100%;
  width: 50%;
  height: 100%;
  /* background-color: #ffd955; */
  background-color: #55b1ff;
  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
}

.login-section.show {
  transform: translateX(-100%);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .main-content.slide-left {
    transform: translateX(-50%);
  }

  .content-wrapper {
    width: 100%;
  }

  .login-section {
    width: 100%;
  }
}

/* 添加浮动动画关键帧 */
@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0px);
  }
}

.submit-button {
  color: #FFF;
  background-color: #ffd955;
}
/* 其他样式保持不变 */
</style> 